<script src="../router/index.js"></script>
<template>
  <div id="home">
    <el-container style="border: 1px solid #eee;height: 100%">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246);">

        <el-menu :default-openeds="['1', '3']" router>

        </el-menu>
        <NavMenu></NavMenu>
      </el-aside>


      <el-container>

        <el-tabs v-model="editableTabsValue" @tab-click="handleClick" type="card" closable @tab-remove="removeTab" style="width:100%;">

          <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            {{item.content}}
            <router-link :to="{ path: item.path }">点我</router-link>
            <router-view></router-view>

          </el-tab-pane>
        </el-tabs>

        <!--<el-tabs v-model="activeName" @tab-click="handleClick">-->
          <!--<el-tab-pane label="手机信息" name="list">手机信息</el-tab-pane>-->
          <!--<el-tab-pane label="用户信息" name="user">用户信息</el-tab-pane>-->
        <!--</el-tabs>-->

        <!--<el-main>-->
          <!--<router-view />-->
        <!--</el-main>-->
      </el-container>

    </el-container>
  </div>
</template>

<script>
  import NavMenu from '../views/Home/NavMenu'
  import Tabs1_0 from '../views/Home/components/Tabs1_0'
  export default {
    name: 'Home',
    components: {
      NavMenu,
      Tabs1_0
    },
    data() {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content',
          path: '/list'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content',
          path: '/user'
        }],
        editableTab:{
          title: '',
          name: '',
          content: '',
          path: ''
        },
        tabIndex: 2,
      }
    },
    methods: {
      addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      handleClick(tab, event) {
        console.log(tab, event);
        // this.$router.push("/user")
      }
    }
  }
</script>
